<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/index-1.css" />
		<!--<link rel="stylesheet" href="css/index.css" />-->
		<link rel="stylesheet" href="css/imageflow.css" />
		<link rel="stylesheet" href="css/all.css" />
		<!--		<script src="js/jquery-2.2.3.js" type="text/javascript" charset="utf-8"></script>-->
		<script src="js/imageflow.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}
		
		.border {
			width: 80%;
			height: 10.666666rem;
			position: fixed;
			/*background-color: black;*/
			margin-left: 10%;
			border-radius: 0.266666rem;
			margin-top: -180%;
			background-color: rgba(0, 0, 0, 0.7);
			opacity: 0.7;
			z-index: 99999999;
			display: none;
		}
		
		.border img {
			float: right;
		}
		
		.yuan {
			width: 80%;
			height: 3.013333rem;
			border: 0.04rem dashed white;
			border-radius: 50%;
			margin-top: 40%;
			margin-left: 10%;
		}
		
		.yuan p {
			margin-top: 10%;
			text-align: center;
			font-size: 0.48rem;
			color: #fff;
		}
		
		.yuan p span {
			color: red;
		}
		
		.go {
			width: 2.173333rem;
			height: 0.813333rem;
			line-height: 0.813333rem;
			text-align: center;
			border-radius: 0.066666rem;
			background-color: #34a0fe;
			z-index: 999999999;
			margin-left: 35%;
			margin-top: 10%;
			color: #fff;
		}
	</style>

	<body>
		<div class="box">
			<div class="head">
				<header>
					<!--<div class="scan">
					</div>
					<span class="location">学数界</span>
					<div class="search"></div>-->
				</header>
				<div id="from">
					<div id="aa">
						<input type="text" name="from_1" id="from_1" placeholder="搜索" />
					</div>
					<div id="bb">
						<img class="from_img" src="img/max.png" />
					</div>
				</div>
			</div>
			<!--<div class="new">
				<header>
					
				</header>
				<div id="from">
					<div id="aa">
						<input type="text" name="from_1" id="from_1" placeholder="搜索" />
					</div>
					<div id="bb">
						<img class="from_img" src="img/max.png" />
					</div>

				</div>
			</div>-->

			<div id="text">
				<img src="img/fenxiang1.png" />
			</div>
			<div class="body">
				<div id="div">
					<div id="div_one">
						<div style="color:#fff;background-color: #529ff9;" class="div1 y1 lischeck" data-menu="0">
							<img class="image" src="img/book2.png" /> 必修一
						</div>
						<div class="div1 y2" data-menu="1">
							<img class="image" src="img/book.png" /> 必修二
						</div>
						<div class="div1 y3" data-menu="2">
							<img class="image" src="img/book.png" /> 必修三
						</div>
						<div class="div1" data-menu="3">
							<img class="image" src="img/book.png" /> 必修四
						</div>
						<div class="div1" data-menu="4">
							<img class="image" src="img/book.png" /> 必修五
						</div>
						<div class="div1" data-menu="5">
							<img class="image" src="img/book.png" /> 选修一
						</div>
						<div class="div1" data-menu="6">
							<img class="image" src="img/book.png" /> 选修二
						</div>
						<div class="div1" data-menu="7">
							<img class="image" src="img/book.png" /> 选修三
						</div>
						<div class="div1" data-menu="8">
							<img class="image" src="img/book.png" /> 选修四
						</div>
						<!--<div class="div1" data-menu="9">
						<img class="image" src="img/book.png" />
						必修一
					</div>-->

					</div>
				</div>

				<!--<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
				</div>-->

			</div>
			<div style='font-size:16px;height: 1;line-height: 1rem;margin-left: 5%;font-size: 0.413333rem;'>
				<span style="border-left: 0.066666rem  solid #549EF7;">&nbsp;最近课题</span>
			</div>
			<!--<ul class='list'>
				<li>
					<div class='stus'>
						<ul>
							<li class='text'>利用三角形解答题</li>
							<img class='text1' src="img/cos.png" alt="">
						</ul>
					</div>
					<div class='stus1'>
						<ul>
							<li class='share'>248人正在学习</li>
							<li class='share1'>248人正在学习<img src="img/fenxiang.png" /></li>
						</ul>
					</div>
				</li>
				<li>
					<div class='stus' style="background-color: #f19ec2;">
						<ul>
							<li class='text'>利用三角形解答题</li>
							<img class='text1' src="img/cos.png" alt="">
						</ul>
					</div>
					<div class='stus1'>
						<ul>
							<li class='share'>248人正在学习</li>
							<li class='share1'>248人正在学习<img src="img/fenxiang.png" /></li>
						</ul>
					</div>
				</li>

				<li>
					<div class='stus' style="background-color: #b09ef1;">
						<ul>
							<li class='text'>利用三角形解答题</li>
							<img class='text1' src="img/cos.png" alt="">
						</ul>
					</div>
					<div class='stus1'>
						<ul>
							<li class='share'>248人正在学习</li>
							<li class='share1'>248人正在学习<img src="img/fenxiang.png" /></li>
						</ul>
					</div>
				</li>
			</ul>-->
			<!--<div class="null"></div>-->
			<div class="img1" style="display: block;height: 15rem;">
				<ul class='list'>
					<li>
						
							<div class='stus'>
								<a href="play.html">
								<ul>
									<li class='text'>利用三角形解答题</li>
									<img class='text1' src="img/cos.png" alt="">
								</ul>
							</div>
							</a>
							<div class='stus1'>
								<ul>
									<li class='share'>248人正在学习</li>
									<li class='share1'>248人正在学习<img src="img/fenxiang.png" /></li>
								</ul>
							</div>
						
					</li>
					<li>
						

							<div class='stus' style="background-color: #f19ec2;">
								<a href="play.html">
								<ul>
									<li class='text'>利用三角形解答题</li>
									<img class='text1' src="img/cos.png" alt="">
								</ul>
								</a>
							</div>
							<div class='stus1'>
								<ul>
									<li class='share'>248人正在学习</li>
									<li class='share1'>248人正在学习<img src="img/fenxiang.png" /></li>
								</ul>
							</div>

						
					</li>

					<li>
						
							<div class='stus' style="background-color: #b09ef1;">
								<a href="play.html">
								<ul>
									<li class='text'>利用三角形解答题</li>
									<img class='text1' src="img/cos.png" alt="">
								</ul>
								</a>
							</div>
							<div class='stus1'>
								<ul>
									<li class='share'>248人正在学习</li>
									<li class='share1'>248人正在学习<img src="img/fenxiang.png" /></li>
								</ul>
							</div>
						
					</li>
				</ul>
				<div class="null"></div>

			</div>

			<div class="img2" style="width: 100%;height: 470px;background: yellow;position: absolute;display: none;">
				<ul class='list'>
					<li>
						<div class='stus'>
							<ul>
								<li class='text'>利用三角形解答题</li>
								<img class='text1' src="img/cos.png" alt="">
							</ul>
						</div>
						<div class='stus1'>
							<ul>
								<li class='share'>248人正在学习</li>
								<li class='share1'>248人正在学习<img src="img/fenxiang.png" /></li>
							</ul>
						</div>
					</li>
					<li>
						<div class='stus' style="background-color: #f19ec2;">
							<ul>
								<li class='text'>利用三角形解答题</li>
								<img class='text1' src="img/cos.png" alt="">
							</ul>
						</div>
						<div class='stus1'>
							<ul>
								<li class='share'>248人正在学习</li>
								<li class='share1'>248人正在学习<img src="img/fenxiang.png" /></li>
							</ul>
						</div>
					</li>

					<li>
						<div class='stus' style="background-color: #b09ef1;">
							<ul>
								<li class='text'>利用三角形解答题</li>
								<img class='text1' src="img/cos.png" alt="">
							</ul>
						</div>
						<div class='stus1'>
							<ul>
								<li class='share'>248人正在学习</li>
								<li class='share1'>248人正在学习<img src="img/fenxiang.png" /></li>
							</ul>
						</div>
					</li>
				</ul>
				<div class="null"></div>
			</div>
			<div class="img3" style="width: 100%;height: 470px;background: red;position: absolute;display: none;">

			</div>
			<div class="img4" style="width: 100%;height: 470px;background: blue;position: absolute;display: none;">

			</div>
			<div class="img5" style="width: 100%;height: 470px;background: pink;position: absolute;display: none;">

			</div>
			<div class="img6" style="width: 100%;height: 470px;background: gainsboro;position: absolute;display: none;">

			</div>
			<div class="img7" style="width: 100%;height: 470px;position: absolute;display: none;">

			</div>

			<div id="bottom">
				<div id="bottom_one">
					<a href="new_file.html">
						<img src="img/shouye.png" />
						<p>首页</p>
					</a>
				</div>
				<div id="bottom_one">
					<a href="index-1.html">
						<img class="one1" src="img/mem.png" />
						<p style="color: #549EF7;">每天一题</p>
					</a>
				</div>
				<div id="bottom_one">
					<a href="gkzh.html">
						<img class="one1" src="img/gaokaozonghe-1.png" />
						<p>高考综合</p>
					</a>
				</div>
				<div id="bottom_one">
					<a href="shitiku.html">
						<img class="one2" src="img/shitiku.png" />
						<p>试题库</p>
					</a>
				</div>
				<div id="bottom_one">
					<a href="me.html">
						<img src="img/wodeyemian.png" />
						<p>我的</p>
					</a>
				</div>
			</div>
			<div class="border">
				<img class="btn" src="img/gb.png" />
				<div class="yuan">
					<p>分享每日一题可获<span>得点券</span></p>
					<p>点券能<span>购买试题库</span></p>
				</div>
				<div class="go">
					去分享
				</div>
			</div>
		</div>

	</body>
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script>
		var myVideo = document.getElementById("video1");

		function playPause() {
			if(myVideo.paused)
				myVideo.play();
			else
				myVideo.pause();
		}

		function makeBig() {
			myVideo.width = 560;
		}

		function makeSmall() {
			myVideo.width = 320;
		}

		function makeNormal() {
			myVideo.width = 420;
		}
	</script>
	<script type="text/javascript">
		//必修一改变背景色和文字颜色
		$(".div1").each(function() {
			$(this).click(function() {
				$(this).css("background-color", "#529ff9");
				$(this).css("color", "#fff");
				$(this).siblings().css("background-color", "#fff");
				$(this).siblings().css("color", "#529ff9");
				$(this).children().attr("src", "img/book2.png");
				$(this).siblings().children().attr("src", "img/book.png");

			});
		});
		$(document).ready(function() {
			$(".y1").click(function() {
				$(".img1").show();
				$(".img2").hide();
				$(".img3").hide();
				$(".img4").hide();
				$(".img5").hide();
				$(".img6").hide();
				$(".img7").hide();

			});
			$(".y2").click(function() {
				$(".img2").show();
				$(".img1").hide();
				$(".img3").hide();
				$(".img4").hide();
				$(".img5").hide();
				$(".img6").hide();
				$(".img7").hide();
			});

			$(".y3").click(function() {
				$(".img3").show();
				$(".img2").hide();
				$(".img1").hide();
				$(".img4").hide();
				$(".img5").hide();
				$(".img6").hide();
				$(".img7").hide();
			});

			$(".y4").click(function() {
				$(".img4").show();
				$(".img2").hide();
				$(".img3").hide();
				$(".img1").hide();
				$(".img5").hide();
				$(".img6").hide();
				$(".img7").hide();
			});

			$(".y5").click(function() {
				$(".img5").show();
				$(".img2").hide();
				$(".img3").hide();
				$(".img4").hide();
				$(".img1").hide();
				$(".img6").hide();
				$(".img7").hide();
			});

			$(".y6").click(function() {
				$(".img6").show();
				$(".img2").hide();
				$(".img3").hide();
				$(".img4").hide();
				$(".img5").hide();
				$(".img1").hide();
				$(".img7").hide();
			});

			$(".y7").click(function() {
				$(".img7").show();
				$(".img2").hide();
				$(".img3").hide();
				$(".img4").hide();
				$(".img5").hide();
				$(".img6").hide();
				$(".img1").hide();
			});

		});
		$("#text").click(function() {
			$(".border").css("display", "block");
		})
		$(".btn").click(function() {
			$(".border").css("display", "none");
		})
	</script>

</html>